<script>
init({
  title: 'Table From HTML',
  desc: 'Use `data-toggle="table"` attribute to transform table from an existing, unformatted html table. In the example, we set `search` and `showColumns` options.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <table
    data-toggle="table"
    data-search="true"
    data-show-columns="true"
  >
    <thead>
      <tr class="tr-class-1">
        <th
          data-field="name"
          rowspan="2"
          data-valign="middle"
        >
          Name
        </th>
        <th colspan="3">
          Detail
        </th>
      </tr>
      <tr class="tr-class-2">
        <th
          data-field="star"
          data-custom-attribute="star"
        >
          Stars
        </th>
        <th
          data-field="forks"
          data-custom-attribute="forks"
        >
          Forks
        </th>
        <th data-field="description">
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        id="tr-id-1"
        class="tr-class-1"
        data-title="bootstrap table"
        data-object="{&quot;key&quot;: &quot;value&quot;}"
      >
        <td
          id="td-id-1"
          class="td-class-1"
          data-title="bootstrap table"
        >
          <a
            href="https://github.com/wenzhixin/bootstrap-table"
            target="_blank"
          >bootstrap-table</a>
        </td>
        <td data-value="526">
          8827
        </td>
        <td data-text="122">
          3603
        </td>
        <td data-i18n="Description">
          An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
        </td>
      </tr>
      <tr
        id="tr-id-2"
        class="tr-class-2"
      >
        <td
          id="td-id-2"
          class="td-class-2"
        >
          <a
            href="https://github.com/wenzhixin/multiple-select"
            target="_blank"
          >multiple-select</a>
        </td>
        <td>1615</td>
        <td>623</td>
        <td>
          A jQuery plugin to select multiple elements with checkboxes :)
        </td>
      </tr>
      <tr
        id="tr-id-3"
        class="tr-class-3"
      >
        <td
          id="td-id-3"
          class="td-class-3"
        >
          <a
            href="https://github.com/wenzhixin/bootstrap-show-password"
            target="_blank"
          >bootstrap-show-password</a>
        </td>
        <td>220</td>
        <td>85</td>
        <td>
          Show/hide password plugin for twitter bootstrap.
        </td>
      </tr>
      <tr
        id="tr-id-4"
        class="tr-class-4"
      >
        <td
          id="td-id-4"
          class="td-class-4"
        >
          <a
            href="https://github.com/wenzhixin/bootstrap-table-examples"
            target="_blank"
          >bootstrap-table-examples</a>
        </td>
        <td>1734</td>
        <td>1532</td>
        <td>Bootstrap Table Examples</td>
      </tr>
      <tr
        id="tr-id-5"
        class="tr-class-5"
      >
        <td
          id="td-id-5"
          class="td-class-5"
        >
          <a
            href="https://github.com/wenzhixin/scutech-redmine"
            target="_blank"
          >scutech-redmine</a>
        </td><td>24</td>
        <td>18</td>
        <td>Redmine notification tools for chrome extension.</td>
      </tr>
    </tbody>
  </table>
</template>
